<template>
    <div style="background-color: #fff;" class="bty-question">
        <div style="overflow: hidden;">
            <div class="about-top">
                <div style="color: #efefef; font-size: 24px;">TECHNOLOGY ADVICE</div>
            </div>
        </div>
        <div v-html="promotionalData.content_en"></div>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { getTechOrder }  from '@/requests/index';

const promotionalData = reactive({
            id: 1,
            content: "",
            content_en: "",
            imgs: "",
            imgs_en: ""
        });
const getTech = async() =>{
    const res = await getTechOrder({"id": 1});
    if (res.status === 2000){
        const data = res.data;
        promotionalData.id = 1;
        promotionalData.content = data.content;
        promotionalData.content_en = data.content_en;
    }
};
getTech()
</script>


<style scoped>
a{
    text-decoration: none;
}
p{
    margin: 0;
    font-size: 13px;
}
ul{
    margin: 0;
    padding-left: 20px;
}
.bty-question{
    color: #497AAC;
    font-size: 13px;
}
.bty-question-lst{
    margin-top: 15px;
}
.bty-question-lst > span{
    font-size: 15px;
}


.bty-question-first-span{
    font-size: 14px;
}
.bty-question-first-span-sec{
    font-size: 13px;
}
.bty-question-div > div{
    margin-top: 8px;
}

.about-top{
    width:100%;
    height:100px;
    font-size:14px;
    line-height:100px;
    text-align:center;
    background: linear-gradient(to right, rgb(103, 178, 111), rgb(76, 162, 205));
    border-radius: 5px;
    background-size:100% 100%;
    margin-bottom: 20px;
    padding:3px 0 ; 
}
</style>